<template>
	<view class="content mainpadding">
		<!-- 商品 -->
		<view class="mainpadding border2 ffffff">
			<view class="text_x color_ling">商品</view>
			<view :class="index==secondList.length-1?'flexleft margin_top':'flexleft margin_top padding_bottom line_bottom'" v-for="(item,index) in secondList" :key="item.id">
				<view class="goodsImg margin_right3">
					<image :src="item.logoimage_text" mode=""></image>
				</view>
				<view class="justify_between_column" style="width: 100%;">
					<view class="text_a color_san bold yihang">{{item.goods_name}}</view>
					<view class="text_b color_six ">尺寸：{{item.wei}}*{{item.hei}} {{item.formulacount}}{{item.size}}</view>
					<view class="flexbetween">
						<view class="xiaolan" v-if="item.spunatdata_text && item.spunatdata_text.length">規格：<text class="margin_right1" v-for="(value) in item.spunatdata_text" :key="value.spunatid">{{value.spunatname}}*{{value.num}}&nbsp;&nbsp;&nbsp;</text></view>
						<view class="flexright flex1">
							<view class="text_six color_orange">x{{item.num}}</view>
						</view>
					</view>
					<view class="flexbetween">
						<view class="price">${{item.price}}</view>
						<view @click="removeGoods(item.id)">
							<u-icon name="trash" color="#333" size="16"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mainpadding margin_top ffffff border2">
			<view class="text_x color_ling">訂單信息</view>
			<view class="flexbetween margin_top">
				<view class="text_a color_six">訂單總金額</view>
				<view class="text_a color_orange" v-text="'$'+allprice"></view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="footerBox">
			<view class="footerPirce flexbetween">
				<view class="paddingtb padding_left3">
					<text class="color_ling text_d margin_right1">合計</text>
					<text class="totalPrice margin_right1">$</text>
					<text class="totalPrice" style="font-size: 36rpx;"  v-text="allprice">{{allprice}}</text>
				</view>
				<view class="settlement" @click="submit()">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shop_id: "", //店鋪id
				allprice:0,
				secondList: [], //商品列表
				shop_id: uni.getStorageSync("shop_id"),
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			async submit(){
				let _this = this
				let res = await this.http.request('/api/ordergoods/cartToOrderGoods', 'POST', {
					order_goods_id:uni.getStorageSync("order_goods_id"),
					shop_id: this.shop_id,
				})
				if (res.code == 1) {
					this.http.toast(res.msg)
					setTimeout(()=>{
						uni.navigateBack(1)
					},1000)
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			async getList() { //選擇商品
				let _this = this
				let res = await this.http.request('/api/ordergoods/shopOrderCartIndex', 'POST', {
					shop_id: this.shop_id,
					order_goods_id:uni.getStorageSync("order_goods_id")
				})
				if (res.code == 1) {
					let price = 0
					res.data.forEach(item => {
						price = Number(price) + Number(item.price)
					})
					this.secondList = res.data
					this.allprice = price
					// console.log(this.orderInfo);
				} else if (res.code == 0) {
					// this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			goSelectGoodsList() { //選擇商品
				uni.navigateTo({
					url: `./selectGoodsList?id=${this.shop_id}`
				})
			},
			async removeGoods(id) { //刪除商品
				let res = await this.http.request('/api/ordergoods/delOrderCart', 'GET', {
					id
				})
				if (res.code == 1) {
					this.http.toast("刪除成功")
					this.getList()
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 180rpx;
	}

	::v-deep.u-navbar__content__title {
		font-weight: 800;
	}

	.scanImg {
		width: 42rpx;
		height: 42rpx;
		margin-top: 10rpx;
	}

	.goodsImg {
		width: 157rpx;
		height: 157rpx;
		min-width: 157rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			border-radius: 14rpx;
		}

		.shipment {
			// width: 71rpx;
			// height: 30rpx;
			// line-height: 30rpx;
			padding: 4rpx;
			box-sizing: border-box;
			text-align: center;
			background: #13C463;
			border-radius: 14rpx 0rpx 14rpx 0rpx;
			font-size: 18rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			position: absolute;
			left: 0;
			top: 0;
		}
	}

	.price {
		font-size: 30rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #FF5C00;
	}

	// 底部
	.footerBox {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 50rpx;

		.footerPirce {
			// width: 708rpx;
			height: 101rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 53rpx 53rpx 53rpx 53rpx;
		}

		.totalPrice {
			font-size: 26rpx;
			font-family: DIN Next LT Pro-Medium;
			font-weight: 500;
			color: rgba(253, 70, 62, 1);
		}

		.settlement {
			width: 178rpx;
			height: 101rpx;
			line-height: 101rpx;
			text-align: center;
			background: #FFB800;
			border-radius: 0rpx 53rpx 53rpx 0rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}
	}
</style>